<template>
	<!-- 推荐的歌单 -->
	<view class="songList" v-if="playList">

		<view class="songListTop">
			<view class="zezhao">
				<image :src="playList.coverImgUrl" mode=""></image>
			</view>
			<view class="songListTop-left">
				<!-- 歌单头像 -->
				<image :src="playList.coverImgUrl" mode=""></image>

			</view>
			<view class="songListTop-right">
				<!-- 歌单作者 -->
				<view class="author one-lint-hidden">{{playList.name}}</view>
				<!-- 创建歌单的人 -->
				<view class="creator">
					<image :src="playList.creator.avatarUrl" mode=""></image>
					<text class="name">{{playList.creator.nickname}}</text>
					<text class="time">{{cteateTime}}</text>
				</view>
				<!-- 属性 -->
				<view class="others">
					<view>
						<!-- 收藏 -->
						<i class="iconfont icon-shoucangjia">({{playList.subscribedCount}})</i>
					</view>
					<view>
						<!-- 分享 -->
						<i class="iconfont icon-fenxiang">({{playList.shareCount}})</i>
					</view>
					<view>
						<!-- 评论 -->
						<i class="iconfont icon-pinglun">({{playList.commentCount}})</i>
					</view>
				</view>
				<!-- 歌单标签 -->
				<view class="tags">
					标签：
					<text v-for="(tags,index) in playList.tags" :key="index">{{tags}}</text>
				</view>
				<!-- 歌单介绍 -->
				<view class="description more5-lint-hidden">
					介绍：
					{{playList.description}}
				</view>
			</view>
		</view>
		<!-- 歌单 总数 播放量等 -->
		<view class="total">
			<view class="total-left">
				<text>歌曲列表</text>  {{playList.trackCount}} 首歌
			</view>
			<view class="total-right">
				播放：
				<text>{{playList.playCount}}</text>次
			</view>
		</view>
		<!-- 歌曲列表 -->
		<songList :songlist="playList.tracks"/>
		
		<!-- 评论列表 -->
		<view class="zuixinpinglun">
			最新评论{{commentsTotal}}
		</view>
		
		<pinglun :comments="comments"></pinglun>
	</view>
</template>

<script>
	
	import moment from 'moment'
	export default {
		data() {
			return {
				playList: {}, // 歌单详情
				comments:[],// 评论 列表
				commentsTotal:0,// 评论总数
			};
		},
		onLoad(option) {
			// 获取歌单详情
			this.getSongList(option.id)
			// 获取评论
			this.getComments(option.id)
		},
		methods: {
			open() {
			    this.$refs.popup.open('bottom')
			},
			close() {
			    this.$refs.popup.close()
			},
			
			
			// 获取 推荐 xxxx 歌单的信息
			async getSongList(id) {
				try {
					const res = await uni.$request('get', '/playlist/detail?id=' + id)
					this.playList = res.data.playlist
					console.log('移动端报错',this.playList.creator.avatarUrl);
				} catch (e) {
					//TODO handle the exception
					console.log(e);
					uni.$utils.errorHander(e.message, 'error')
				}
			},
			// 获取评论列表
			async getComments(id){
				try {
					const res = await uni.$request('get', '/comment/playlist?id=' + id)
					// 处理 评论 数据
					// 筛选出  回复别人 的 评论
					// let huifuOthers =  res.data.comments.filter((item,index)=>{
					// 	item.huifu=[]
					// 	return item.parentCommentId != 0
					// })

					// huifuOthers.forEach(item=>{
					// 	// let huifu = []
					// 	res.data.comments.forEach(comments =>{
					// 		if(comments.commentId ==item.parentCommentId){
					// 			// console.log('父级',comments,'子集',item);
					// 			// huifu.push(item)
					// 			comments.huifu.push(item)
					// 			// console.log(huifu);
					// 		}
							
					// 	})
					// })
					// console.log(res.data.comments);
					// console.log(huifuOthers);
					let comments=  uni.$utils.formattingComments(res.data.comments)
					// this.comments = res.data.comments
					this.comments = comments
					console.log('即将要传过去的评论',this.comments);
					this.commentsTotal = res.data.total
				} catch (e) {
					//TODO handle the exception
					console.log(e);
					uni.$utils.errorHander(e.message, 'error')
				}
			}
		},
		computed: {
			cteateTime: function() {
				return moment(this.playList.createTime).format('YYYY-MM-DD') + '创建'
			}
		}
	}
</script>

<style lang="less">
	.songList {
				background-color: #F8F8F8;
		// 
		.songListTop {
			position: relative;
			padding:   20rpx;
			margin-bottom: 20rpx;
			height: 600rpx;
			display: flex;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			.zezhao {
				position: absolute;
				overflow: hidden;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: -1;
				-webkit-filter: blur(10px);

				image {
					width: 160%;
					height: 560rpx;
				}
			}

			.songListTop-left {
				image {
					width: 150rpx;
					height: 150rpx;
					border-radius: 10rpx;
				}

				margin-right: 20rpx;
			}

			.songListTop-right {
				width: calc(100% - 150rpx);
				// 作者
				.author {
					width: 100%;
					font-size: 40rpx;
				}

				// 歌单创建人
				.creator {
					padding-top: 10rpx;
					display: flex;
					align-items: center;
					height: 120rpx;
					image {
						width: 100rpx;
						height: 100rpx;
					}

					.name {
						margin-left: 10rpx;
						color: #0c73c2;
						font-size: 34rpx;
					}

					.time {
						margin-left: 10rpx;
						color: #fff;
						font-size: 22rpx;
					}

				}

				// 歌单的标签
				.tags {
					display: flex;
					align-items: center;
					height: 80rpx;

					text {
						padding: 10rpx;
						background-color: #f6f6f6;
						border-radius: 20rpx;
						margin-right: 10rpx;
					}
				}
				// 属性
				.others{
					display: flex;
					align-items: center;
					height: 80rpx;
					view {
						padding: 5rpx 10rpx;
						background-color: #f6f6f6;
						border-radius: 20rpx;
						margin-right: 10rpx;
						
					}
				}

			}

		}
		// 歌单总数  播放量 等等
		.total{
			background-color: #FFFFFF;
			margin-bottom: 20rpx;
			display: flex;
			padding: 0 20rpx;
			justify-content: space-between;
			align-items: flex-end;
			border-bottom: 1px solid #d43c33;
			.total-left{
				font-size: 26rpx;
				text{
					font-size: 40rpx;
					margin-right: 10rpx;
				}
			}
			.total-right{
				font-size: 26rpx;
				text{
					color: #d43c33;
				}
			}
		}
		.zuixinpinglun{
			margin-top: 20rpx;
			font-size: 40rpx;
			padding-left: 20rpx;
		}
	
	}
</style>
